<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Course Management System</title>
    <style>
        /* Table styles */
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }

        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }

        .hidden {
            display: none;
        }

        /* Feedback window styles */
        .feedback-window {
            margin-top: 10px;
            padding: 10px;
            border-radius: 4px;
        }

        .success {
            background-color: #dff0d8;
            color: #000000;
        }

        .error {
            background-color: #f2dede;
            color: #a94442;
        }

        .warning {
            background-color: #fcf8e3;
            color: #8a6d3b;
        }

        /* Box styling */
        .box {
            margin-bottom: 20px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #f9f9f9;
        }

        /* Form elements */
        input, select, button {
            margin: 8px 5px;
            padding: 10px;
            border-radius: 4px;
            border: 1px solid #ddd;
        }

        button {
            background-color: #000000;
            color: white;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #000000;
        }

        button:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }

        /* Section titles */
        .section-title {
            color: #2c3e50;
            border-bottom: 2px solid #3498db;
            padding-bottom: 10px;
            margin-top: 30px;
        }

        /* Prerequisite list */
        .prereq-list {
            margin-top: 10px;
            padding-left: 20px;
        }

        /* Conflict warning */
        .conflict-warning {
            color: #e74c3c;
            font-weight: bold;
        }

        /* Success message */
        .success-message {
            color: #000000;
        }

        /* Sorting options */
        .sorting-options {
            margin: 15px 0;
            padding: 10px;
            background-color: #f5f5f5;
            border-radius: 4px;
        }
    </style>
</head>

<body>
    <!-- Navigation bar matching index.html and library_management.html -->
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="course_management.html">Course Management</a></li>
            <li><a href="library_management.html">Library Management</a></li>
            <li><a href="social_life.html">Social Life</a></li>
            <li><a href="data_display.html">Data Display</a></li>
        </ul>
    </nav>

    <!-- Content container -->
    <div class="container">
        <h1>Course Management System</h1>

        <!-- Student Management Section -->
        <div class="box">
            <h2 class="section-title">Student Management</h2>
            <div>
                <label for="studentName">Name:</label>
                <input type="text" id="studentName" placeholder="Enter student name">
                <label for="studentScore">Initial Score:</label>
                <input type="number" id="studentScore" placeholder="Enter student score" min="0" max="100">
                <button id="addStudent">Add Student</button>
                <div class="feedback-window hidden" id="addStudentFeedback"></div>
            </div>

            <div class="sorting-options">
                <button id="sortByName">Sort by Name</button>
                <button id="sortByScore">Sort by Overall Score</button>
                <label for="sortByCourseGrade">Sort by Course Grade:</label>
                <select id="sortByCourseGrade">
                    <option value="">Select a course</option>
                    <option value="CS101">CS101 - Introduction to Programming</option>
                    <option value="MATH201">MATH201 - Discrete Mathematics</option>
                    <option value="CS250">CS250 - Data Structures</option>
                </select>
            </div>

            <table id="studentsTable">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Score/Grade</th>
                        <th>Enrolled Courses</th>
                        <th>Completed Courses</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Student data will be inserted here -->
                </tbody>
            </table>
        </div>

        <!-- Course Prerequisite Management -->
        <div class="box">
            <h2 class="section-title">Course Prerequisite Management</h2>
            <div>
                <label for="courseForPrereq">Course:</label>
                <select id="courseForPrereq">
                    <option value="">Select a course</option>
                    <option value="CS101">CS101 - Introduction to Programming</option>
                    <option value="MATH201">MATH201 - Discrete Mathematics</option>
                    <option value="CS250">CS250 - Data Structures</option>
                    <option value="CS300">CS300 - Algorithms</option>
                    <option value="CS350">CS350 - Database Systems</option>
                </select>

                <label for="prereqToAdd">Prerequisite Course:</label>
                <select id="prereqToAdd">
                    <option value="">Select prerequisite</option>
                    <option value="CS101">CS101 - Introduction to Programming</option>
                    <option value="MATH201">MATH201 - Discrete Mathematics</option>
                    <option value="CS250">CS250 - Data Structures</option>
                </select>

                <button id="addPrerequisite">Add Prerequisite</button>
                <button id="removePrerequisite">Remove Prerequisite</button>
            </div>

            <div class="feedback-window hidden" id="prereqFeedback"></div>

            <h3>Current Prerequisite Structure</h3>
            <div id="prerequisiteDisplay">
                <!-- Prerequisite relationships will be displayed here -->
            </div>
        </div>

        <!-- Enrollment System with Prerequisite Checking -->
        <div class="box">
            <h2 class="section-title">Course Enrollment System</h2>
            <div>
                <label for="enrollStudent">Student:</label>
                <select id="enrollStudent">
                    <option value="">Select a student</option>
                    <!-- Will be populated by JavaScript -->
                </select>

                <label for="courseToEnroll">Course:</label>
                <select id="courseToEnroll">
                    <option value="">Select a course</option>
                    <option value="CS101">CS101 - Introduction to Programming</option>
                    <option value="MATH201">MATH201 - Discrete Mathematics</option>
                    <option value="CS250">CS250 - Data Structures</option>
                    <option value="CS300">CS300 - Algorithms</option>
                    <option value="CS350">CS350 - Database Systems</option>
                </select>

                <button id="checkEligibility">Check Eligibility</button>
                <button id="processEnrollment">Enroll Student</button>
                <button id="completeCourse">Mark as Completed</button>
            </div>

            <div class="feedback-window hidden" id="enrollmentFeedback"></div>

            <h3>Enrollment Status</h3>
            <div id="enrollmentStatus">
                <!-- Enrollment status will be displayed here -->
            </div>
        </div>

        <!-- Scheduling Solution -->
        <div class="box">
            <h2 class="section-title">Course Scheduling System</h2>
            <div>
                <label for="schedulingCourse">Course:</label>
                <select id="schedulingCourse">
                    <option value="">Select a course</option>
                    <option value="CS101">CS101 - Introduction to Programming</option>
                    <option value="MATH201">MATH201 - Discrete Mathematics</option>
                    <option value="CS250">CS250 - Data Structures</option>
                    <option value="CS300">CS300 - Algorithms</option>
                    <option value="CS350">CS350 - Database Systems</option>
                </select>

                <label for="scheduleDay">Day:</label>
                <select id="scheduleDay">
                    <option value="Monday">Monday</option>
                    <option value="Tuesday">Tuesday</option>
                    <option value="Wednesday">Wednesday</option>
                    <option value="Thursday">Thursday</option>
                    <option value="Friday">Friday</option>
                </select>

                <label for="startTime">Start Time:</label>
                <input type="time" id="startTime" value="09:00">

                <label for="endTime">End Time:</label>
                <input type="time" id="endTime" value="11:00">

                <label for="classroom">Classroom:</label>
                <input type="text" id="classroom" placeholder="Building-Room (e.g., CS-101)">

                <button id="checkScheduleConflict">Check for Conflicts</button>
                <button id="saveSchedule">Save Schedule</button>
                <button id="rescheduleCourse">Reschedule</button>
            </div>

            <div class="feedback-window hidden" id="schedulingFeedback"></div>

            <h3>Current Course Schedule</h3>
            <table id="courseScheduleTable">
                <thead>
                    <tr>
                        <th>Course</th>
                        <th>Day</th>
                        <th>Time</th>
                        <th>Classroom</th>
                        <th>Instructor</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Course schedule will be displayed here -->
                </tbody>
            </table>
        </div>
    </div>

    <script src="course.js"></script>
</body>

</html>